Capítulo 11

Este resumo é fruto de um estudo das aulas 31, 32, 33, 34, 35 e 36 do primeiro módulo do curso de HTML 5 e CSS 3 feito através do canal no youtube do Gustavo Guanabara.

Imagens dinâmicas.

Sites lentos podem diminuir o tempo de retenção do usuário e isso pode prejudicar-lo no sistema de busca porque dessa forma o google indicará cada vez menos o seu site aos usuários, e ele pode ficar lento seja porque suas imagens sejam grandes demais, gerando um tempo maior para carregar seu site e/ou gerar barras de rolagem lateral. Por isso é importante cuidar das imagens, seja em relação aos direitos autorais, ao tamanho de armazenamento e também de suas dimensões na tela do usuário, e para isso utilizamos as tags <picture> e <source>.
Ex.:.


            <picture>
                <source media="(max-midth: #px)" srcset="(imagem pequena)" type="(media type)">
                <source media="(max-midth: ##px)" srcset="(imagem média)" type="(media type)">
                <img src="(imagem maior)" alt="(texto alternativo)">
            </picture>

Em relação ao max-midth, pode-se trabalhar com 650px px, 1030 px para evitar a barra de rolagem lateral.

Audios

Para a adição de audios utilizamos a seguinte tag:


            <audio preload="metadata" controls autoplay loop>
                <source src="(áudio no fomato 1)" type="(media type)">
                <source src="(áudio no fomato 2)" type="(media type)">
                <source src="(áudio no fomato 3)" type="(media type)">
                <p> Seu navegador não suporta o formato do áudio <a ref="(caminho do áudio)" download="(nome do áudio.formato)" type="media type"> baixe aqui.</a></p>
            </audio>

No atributo preload temos os seguintes valores:

auto - vai carregar o arquivo de áudio inteiro assim que a página for carregada, mesmo que o usuário nunca aperte o play.
metadata - vai carregar apenas as informações sobre o arquivo (tamanho, tempo, informações de direitos, etc).
none - não vai carregar absolutamente nada até que o usuário clique no botão play ou um script inicie a reprodução.

O atributo controls vai apresentar o player na tela. Caso não seja colocado na tag <audio>, o controle será transparente e o usuário não poderá interagir com ele.

O atributo autoplay, quando inserido, vai iniciar a reprodução do áudio assim que a página for carregada.

O atributo loop vai fazer com que o áudio seja repetido eternamente assim que terminar a sua reprodução.

Vídeos

A hospedagem de vídeos no própio site pode ser feita da seguinte forma:


            <video width="#" poster="(imagem da capa)" controls autoplay >
                <source src="(vídeo no fomato 1)" type="(media type)">
                <source src="(vídeo no fomato 2)" type="(media type)">
                <source src="(vídeo no fomato 3)" type="(media type)">
                <p> Seu navegador não suporta o formato do vídeo.</p>
            </video>

width vai indicar a largura que o vídeo vai ter na tela. Por exemplo, 600px.
poster configura uma imagem que vai aparecer como uma capa, enquanto o visitante não aperta o play para reproduzir o vídeo.
controls vai configurar se os controles do vídeo vão aparecer na parte inferior da mídia, porquepor padrão, os controles não aparecerão.
autoplay diz para o navegador se o vídeo vai começar a tocar automaticamente, assim que a página for carregada.

Lista de formatos compatíveis para cada navegador:

Formatos	compatíveis com
.mp4 .m4v .webm .ogv	Google Chrome
.mp4 .m4v	Microsoft Edge Apple Safari
.webm .ogv	Mozilla Firefox Opera

Mas hospedar o vídeo no próprio site pode consumir muitos dados e isso sair muito caro pros proprietários do mesmo além de deixar o site mais lento e isso contribuir para o aumento da taxa de rejeição. Uma boa opção para evitar isso é incorporar o vídeo de um outro site de hospedagem de vídeos como o YouTube e o Vimeo, isso faz com que seu site carregue mais rápido não dificultando a experiência do Cliente. O vídeo a seguir é do canal do YouTube do portal SEO e nele, é explicado melhor, a importância de ter seus sites leves.

Página inicial